<script setup lang="ts">
//输入框
import { onMounted, reactive, ref } from 'vue';

const input1 = ref('');
const input2 = ref('');
const input3 = ref('');

// 搜索
function search() {
    // console.log(input1.value);
    // console.log(input2.value);
    // console.log(input3.value);
    stdQuery.name = input1.value;
    stdQuery.stuNum = input2.value;
    stdQuery.phoneNumber = input3.value;
    stdMes();
}

// 重置
function reset() {
    input1.value = '';
    input2.value = '';
    input3.value = '';
    stdQuery.name = '';
    stdQuery.stuNum = '';
    stdQuery.phoneNumber = '';
    stdMes();
}

// 学生信息表格
import { ElMessage, ElMessageBox, ElTable, FormRules } from 'element-plus';

const tableData = ref([]);

// 数据导入
import { caseRecord, dailyFeedback, studentsMessage, studentTerminal } from '@/api/students';
import { stdMesType } from '@/api/students/module';
import { getToken } from '@/utils/auth';

// 分页
let total = ref(0);

function currentChange(value: number) {
    console.log(value);
    stdQuery.pageNum = value;
    stdMes();
}

let stdQuery = reactive<stdMesType>({
        name: '',
        collegeId: '',
        classId: '',
        stuNum: '',
        phoneNumber: '',
        pageSize: 10,
        pageNum: 1
    }
);

function stdMes() {
    studentsMessage(stdQuery).then(res => {
        console.log(res);
        tableData.value = res.rows;
        total.value = res.total;
    });
}

stdMes();

// 重置密码
function resetPassword() {
    ElMessageBox.prompt('请输入新密码', '重置密码', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputPattern: /^[a-zA-Z]\w{5,17}$/,
        inputErrorMessage: '请输入以字母开头，长度在6~18之间，只能包含字母、数字和下划线的密码'
    })
        .then(({ value }) => {
            ElMessage({
                type: 'success',
                message: `重置密码成功`
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消重置'
            });
        });
}

// 添加学生
const dialogVisible = ref(false);

interface RuleForm {
    name: string,
    stuNum: string,
    grade: string,
    phoneNumber: string,
    date: string,
    college: string,
    className: string,
    education: string,
    status: string,
    enrollmentTime: string,
    psychometricTest: string,
    familyInfo: string,
    medicationSituation: string,
    remark: string,
    puCeMes: string,
    feedBackMes: string,
    psyArea: string,
    familyArea: string,
    sickArea: string,
    medicineArea: string,
    remarkArea: string,
}

const ruleForm = reactive<RuleForm>({
    name: '',
    stuNum: '',
    grade: '',
    phoneNumber: '',
    date: '',
    college: '',
    className: '',
    education: '',
    status: '',
    enrollmentTime: '',
    psychometricTest: '',
    familyInfo: '',
    medicationSituation: '',
    remark: '',
    puCeMes: '',
    feedBackMes: '',
    psyArea: '',
    familyArea: '',
    sickArea: '',
    medicineArea: '',
    remarkArea: ''
});
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ],
    stdNum: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ]
});
const radio = ref('1');

// 保存信息
function save() {
    dialogVisible.value = false;
    // console.log(ruleForm);
    let newList = JSON.parse(JSON.stringify(ruleForm));
    console.log(newList);
    tableData.value.push(newList);
}

save();

// 导入学生
const introStdMes = ref(false);

function confirm() {
    introStdMes.value = false;
    let daoList = JSON.parse(JSON.stringify(ruleForm));
    console.log(daoList);
    tableData.value.push(daoList);
}

let headers = ref({
    headers: 'Bearer' + getToken()
});
// 普测信息
const puCe = ref(false);

function savePu() {
    puCe.value = false;
    let puList = JSON.parse(JSON.stringify(ruleForm));
    console.log(puList);
}

// 日常反馈
const feedBack = ref(false);

function saveFeedBack() {
    feedBack.value = false;
}

// 学生端学生信息
import type { TabsPaneContext } from 'element-plus';

const activeName = ref('first');
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
};

const stdTerData = ref([]);

function stdTerMes() {
    studentTerminal(47).then(res => {
        console.log(res);
        // stdTerData.value = res.rows;
    });
}

stdTerMes();

// stdTerMes('1')

// 个案咨询记录
const caseRecData = ref([]);

function caseRecMes() {
    caseRecord().then(res => {
        console.log(res);
        caseRecData.value = res.rows;
    });
}

caseRecMes();

// 日常管理反馈
const dailyFeedbackData = ref([]);
function dailyMes(){
    dailyFeedback(47).then(res => {
        console.log(res);
    })
}
dailyMes()
</script>

<template>
    <!-- 学生查询-->
    <div style="overflow: hidden;"
         v-hasPermi="['student:query']"
    >
        <div style="float: left;font-size: 13px;margin:10px 5px ">
            姓名
            <el-input
                v-model="input1"
                style="width: 140px;margin-right: 3px"
                placeholder="请输入姓名"
                clearable

            />
            学院
            <el-select

                placeholder="请选择学院"
                clearable
                style="width: 140px;margin-right: 3px"
            >
                <el-option label="Zone one" value="shanghai" />
            </el-select>
            年级
            <el-select

                placeholder="请选择年级"
                clearable
                style="width: 140px;margin-right: 3px"

            >
                <el-option label="Zone one" value="shanghai" />
            </el-select>
            学号
            <el-input
                v-model="input2"
                style="width: 140px;margin-right: 3px"
                placeholder="请输入学号"
                clearable

            />
            手机号
            <el-input
                v-model="input3"
                style="width: 140px;margin-right: 3px"
                placeholder="请输入手机号"
                clearable
            />
        </div>

        <div class="mb-4" style="float: right;margin: 10px 5px">
            <el-button style="width: 70px" @click="reset">重置</el-button>
            <el-button type="primary" style="width: 70px" @click="search">搜索</el-button>
        </div>
    </div>

    <div style="margin: 0 5px 10px">
        <el-button type="primary" style="width: 80px;" @click="dialogVisible = true" v-hasPermi="['student:add']">添加
        </el-button>
        <el-button type="primary" style="width: 80px;" @click="introStdMes = true" v-hasPermi="['student:import']">
            导入
        </el-button>
        <el-button type="primary" style="width: 80px;" v-hasPermi="['student:export']">导出</el-button>
    </div>

    <!-- 添加学生 -->
    <el-dialog
        v-model="dialogVisible"
        title="添加学生"
        width="700"
    >
        <div style="display: flex;justify-content: space-around">
            <el-form
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                style="width: 300px"
            >
                <el-form-item label="学生姓名" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入学生姓名" />
                </el-form-item>
                <el-form-item label="年级" prop="grade">
                    <el-input v-model="ruleForm.grade" placeholder="请输入年级" />
                </el-form-item>
                <el-form-item label="学号" prop="stuNum">
                    <el-input v-model="ruleForm.stuNum" placeholder="请输入学号" />
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="入学时间" style="margin-bottom: 40px">
                    <el-date-picker
                        v-model="ruleForm.date"
                        type="date"
                        placeholder="请选择日期"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="心理诊断经历">
                    <el-input
                        v-model="ruleForm.psyArea"
                        maxlength="200"
                        style="width: 240px"
                        placeholder="请输入心理诊断经历"
                        show-word-limit
                        type="textarea"
                    />
                </el-form-item>
                <el-form-item label="家庭情况">
                    <el-input
                        v-model="ruleForm.familyArea"
                        maxlength="200"
                        style="width: 240px"
                        placeholder="请输入家庭情况"
                        show-word-limit
                        type="textarea"
                    />
                </el-form-item>

            </el-form>
            <el-form
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                style="width: 300px"
            >
                <el-form-item label="学院">
                    <el-select
                        v-model="ruleForm.college"
                        placeholder="请选择学院"
                        clearable
                    >
                        <el-option label="Zone one" value="shanghai" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                    <el-select
                        v-model="ruleForm.className"
                        placeholder="请选择班级"
                        clearable
                    >
                        <el-option label="Zone one" value="shanghai" />
                    </el-select>
                </el-form-item>
                <el-form-item label="学历">
                    <el-select
                        v-model="ruleForm.education"
                        placeholder="请选择学历"
                        clearable
                    >
                        <el-option label="Zone one" value="shanghai" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="phoneNumber">
                    <el-radio-group v-model="radio">
                        <el-radio :value="1">正常</el-radio>
                        <el-radio :value="2">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="既往病史">
                    <el-input
                        v-model="ruleForm.sickArea"
                        maxlength="200"
                        style="width: 240px"
                        placeholder="请输入既往病史"
                        show-word-limit
                        type="textarea"
                    />
                </el-form-item>
                <el-form-item label="服药情况">
                    <el-input
                        v-model="ruleForm.medicineArea"
                        maxlength="200"
                        style="width: 240px"
                        placeholder="请输入服药情况"
                        show-word-limit
                        type="textarea"
                    />
                </el-form-item>
                <el-form-item label="其他">
                    <el-input
                        v-model="ruleForm.remarkArea"
                        maxlength="200"
                        style="width: 240px"
                        placeholder="请输入其他信息"
                        show-word-limit
                        type="textarea"
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 导入学生 -->
    <el-dialog
        v-model="introStdMes"
        title="学生导入"
        width="500"
    >
        <el-upload
            class="upload-demo"
            drag
            action="/dev-api/system/student/import"
            :headers="headers"
            multiple
        >
            <el-icon class="el-icon--upload">
                <upload-filled />
            </el-icon>
            <div class="el-upload__text">
                将文件拖到此处，或 <em>点击导入</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    仅允许导入xls，xlsx格式的文件。
                    <a href="../../../public/模板.xls" style="color: #1c84c6">下载模板</a>
                </div>
            </template>
        </el-upload>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="introStdMes = false">取消</el-button>
                <el-button type="primary" @click="confirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!--学生信息表格-->
    <el-table :data="tableData"
              border
              style="width: 100%;font-size: 12px;text-align: center;"
              v-hasPermi="['add001']">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" :index="1" label="序号" width="80" />
        <el-table-column prop="name" label="学生姓名" width="100" />
        <el-table-column prop="college" label="学院" width="100" />
        <el-table-column prop="grade" label="年级" width="80" />
        <el-table-column prop="className" label="班级" width="100" />
        <el-table-column prop="stuNum" label="学号" width="120" />
        <el-table-column prop="phoneNumber" label="手机号" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button link type="primary" size="small">编辑</el-button>
                <el-button link type="primary" size="small" @click="puCe = true">普测信息</el-button>
                <el-button link type="primary" size="small">删除</el-button>
                <el-button link type="primary" size="small" @click="resetPassword">重置密码</el-button>
                <el-button link type="primary" size="small" @click="feedBack = true" v-hasPermi="['student:feedback']">
                    >日常反馈
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 普测信息-->
    <el-dialog
        v-model="puCe"
        title="普测信息"
        width="500"
        align-center
    >
        <el-form
            style="width: 460px"
        >
            <el-form-item>
                <el-input
                    v-model="ruleForm.puCeMes"
                    maxlength="500"
                    placeholder="请填写普测信息"
                    show-word-limit
                    type="textarea"

                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="puCe = false">取消</el-button>
                <el-button type="primary" @click="savePu">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 日常反馈-->
    <el-dialog
        v-model="feedBack"
        title="日常反馈信息"
        width="500"
        align-center
    >
        <el-form
            style="width: 460px"
        >
            <el-form-item>
                <el-input
                    v-model="ruleForm.feedBackMes"
                    maxlength="500"
                    placeholder="请填写日常反馈信息"
                    show-word-limit
                    type="textarea"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="feedBack = false">取消</el-button>
                <el-button type="primary" @click="saveFeedBack">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 分页-->
    <el-pagination
        layout="prev, pager, next"
        :total="total"
        small
        background
        style="float: right;margin-top: 20px"
        @current-change="currentChange"
        v-hasPermi="['add001']"
    />

    <!--学生端学生信息-->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="学生信息" name="first">
            <el-descriptions
                :data="stdTerData"
                title="学生信息"
                :border=true>
                <el-descriptions-item label="姓名" prop="name" width="200px"></el-descriptions-item>
                <el-descriptions-item label="年龄" prop="" width="200px"></el-descriptions-item>
                <el-descriptions-item label="性别" prop="gender" width="200px"></el-descriptions-item>
                <el-descriptions-item label="学历" prop="education"></el-descriptions-item>
                <el-descriptions-item label="班级" prop="classId"></el-descriptions-item>
                <el-descriptions-item label="学号" prop="stuNum"></el-descriptions-item>
                <el-descriptions-item label="手机号码" prop="phoneNumber"></el-descriptions-item>
                <el-descriptions-item label="入学时间" prop="enrollmentTime"></el-descriptions-item>
                <el-descriptions-item label="心理普测结果" prop="psychometricTest"></el-descriptions-item>
                <el-descriptions-item label="既往病史" prop="anamnesis"></el-descriptions-item>
                <el-descriptions-item label="心理诊断经历" prop="experience"></el-descriptions-item>
                <el-descriptions-item label="服药情况" prop="medicationSituation"></el-descriptions-item>
                <el-descriptions-item label="家庭情况" prop="familyInfo"></el-descriptions-item>
                <el-descriptions-item label="其他" prop="remark"></el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="预约信息" name="second">
            <el-empty description="Nothing" />
        </el-tab-pane>
        <el-tab-pane label="个案咨询记录" name="third">
            <el-descriptions
                title=""
                :border=true
            >
                <el-descriptions-item label="个案类型" prop="type" width="200px"></el-descriptions-item>
                <el-descriptions-item label="个案来源" prop="source" width="200px"></el-descriptions-item>
                <el-descriptions-item label="处理级别" prop="level" width="200px"></el-descriptions-item>
                <el-descriptions-item label="来访者情绪表现" prop="emotion"></el-descriptions-item>
                <el-descriptions-item label="来访者身体健康状况、仪表、神态、体态" prop="health"></el-descriptions-item>
                <el-descriptions-item label="来访者自述" prop="statement"></el-descriptions-item>
                <el-descriptions-item label="咨询过程、方法和策略" prop="process"></el-descriptions-item>
                <el-descriptions-item label="咨询印象" prop="impression"></el-descriptions-item>
                <el-descriptions-item label="咨询目标" prop="target"></el-descriptions-item>
                <el-descriptions-item label="咨询效果评估与反馈" prop="result"></el-descriptions-item>
                <el-descriptions-item label="文件信息" prop="file"></el-descriptions-item>
                <el-descriptions-item label="记录人" prop="name"></el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="日常管理反馈" name="fourth">
            <div class="common-layout" style="width: 1000px">
                <el-container style="width: 100%">
                    <el-header style="line-height: 50px;height:50px">反馈信息1</el-header>
                    <el-container style="display: flex">
                        <el-aside style="width: 50%">记录人：{{}}</el-aside>
                        <el-main style="width: 50%">添加时间：{{}}</el-main>
                    </el-container>
                    <el-footer>问题描述：</el-footer>
                </el-container>
            </div>
        </el-tab-pane>

        <el-tab-pane label="测评记录" name="fifth">
            <el-empty description="Nothing" />
        </el-tab-pane>
    </el-tabs>

</template>

<style scoped lang="scss">

</style>
